<template>
  <s-modal
    title="流程设计"
    :visible="visible"
    width="1600px"
    ok-text="保存"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <s-bpmn ref="bpmn" height="600px" :flow-define-id="flowDefineId" :xml="defaultXml" />
  </s-modal>
</template>

<script>
export default {
  name: 'FlowDesign',
  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false,
      flowDefineId: null,
      defaultXml: null
    }
  },
  methods: {
    open(id) {
      this.flowDefineId = id
      this.$loading(true)
      this.$api
        .GET('/workflow/define/selectOneById', { id: id })
        .then((res) => {
          if (!res.data) {
            this.$loading(false)
            this.visible = false
            this.$message.warn('数据不存在')
          } else {
            this.defaultXml = res.data.flowData
            this.$loading(false)
            this.visible = true
          }
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    save() {
      const that = this
      this.$refs.bpmn.getXml().then((xml) => {
        that.confirmLoading = true
        that.$api
          .PUT('/workflow/define/updateFlowData', { id: that.flowDefineId, flowData: xml.xml })
          .then((res) => {
            that.confirmLoading = false
            that.visible = false
            that.$emit('success')
            that.$message.info(res.msg)
          })
          .catch(() => {
            that.confirmLoading = false
          })
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
